.userlist {
	height    : 100%;
	background: #fff;
	width     : 100%;

	.active {
		background: rgba(113, 134, 161, 0.1)
	}

	.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
		background-color: #d9d9d9 !important;
		color           : rgba(0, 0, 0, 0.85) !important;
	}

	.ant-menu-item-selected {
		color: rgba(0, 0, 0, 0.65) !important;
	}

	.ant-menu-item:hover,
	.ant-menu-item-active,
	.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
	.ant-menu-submenu-active,
	.ant-menu-submenu-title:hover {
		color           : rgba(0, 0, 0, 0.85) !important;
		background-color: #f1f1f1 !important;
	}
}


.messagebox {
	width   : 100%;
	height  : 100%;
	position: relative;

	.messagebox-header {
		border-bottom: 1px solid #d6dce0;
		box-sizing   : border-box;
		height       : 50px;
		line-height  : 50px;
		outline      : none;
		margin-bottom: 0;
		padding-left : 0;
		padding      : 0 16px;
		list-style   : none;
		z-index      : 1050;
		color        : rgba(0, 0, 0, 0.65);
		background   : #fff;
		font-size    : 12px;
		overflow     : hidden;
		text-overflow: ellipsis;
		.chat_name {
			display: inline-block;
			max-width: 500px;
			overflow: hidden;
			height: 50px;
			margin-right: 10px;
			text-overflow: ellipsis;
		}
		.groupid {
			vertical-align: top;
		}
		.user-ellipsis {
			float      : right;
			display    : inline-block;
			height     : 50px;
			line-height: 50px;
			cursor     : pointer;
		}

		.user-goback {
			float      : left;
			display    : inline-block;
			height     : 50px;
			line-height: 50px;
			cursor     : pointer;
		}

		.icon-setting {
			position: absolute;
			right   : 20px;
			top     : 131px;
			cursor  : pointer;
		}
	}

	.messagebox-content {
		width     : 100%;
		height    : calc(100% - 150px);
		top       : 50px;
		background: #fff;
		padding   : 10px 16px;
		overflow  : scroll;

		.message-group {
			padding-top: 3px;
			font-size  : 14px;
			line-height: 1.5;
			clear      : both;
			width      : 100%;

			p {
				list-style   : none;
				min-width    : 100px;
				background   : #fff;
				text-align   : left;
				padding      : 13px 15px;
				margin       : 5px 0 0 0;
				border-radius: 25px;
				border       : 1px solid #eceff1;
				// float        : left;


				display      : inline-block;
				padding      : 13px 15px;
				margin-top   : 11px;
				border-radius: 25px;
				border       : 1px solid #eceff1;
				min-width    : 100px;
				word-break   : break-all;

				&.byself {
					background: #eceff1;
					float     : right;
				}
			}
		}
	}
}

.messagebox-footer {
	border-top   : 1px solid #d6dce0;
	position     : absolute;
	bottom       : 0;
	width        : 100%;
	// height    : 150px;
	color        : rgba(0, 0, 0, 0.65);
	background   : #fff;

	.footer-icon {
		padding   : 15px 10px;
		text-align: left;
		height    : 50px;
		display   : flex;
		.icon {
			color      : rgba(0, 0, 0, 0.65);
			font-size  : 20px;
			margin-left: 8px;
		}
	}

	.fotter-send {
		height      : 50px;
		width       : 100%;
		padding-left: 10px;

		.sengTxt {
			text-align   : left;
			height       : 100%;
			width        : 100%;
			box-sizing   : border-box;
			bottom       : 5px;
			font-size    : 14px;
			padding-left : 10px;
			box-shadow   : 0 0 0 0;
			border       : 1px solid #fff;
			outline-style: none
		}
	}
}


.messagebox-menus {
	position        : fixed;
	right           : 20px;
	border          : 1px solid rgba(0, 0, 0, 0.05);
	width           : 140px;
	list-style-type : none;
	background-color: #fff;
	z-index         : 9;

	.menus {
		list-style-type: none;
		padding        : 0;
		font-size      : 16px;
		cursor         : pointer;

	}

	.name-menus {
		height         : 40px;
		overflow       : hidden;
		display        : flex;
		align-items    : center;
		justify-content: center;
	}

	// .icon-menus {
	// 	position    : absolute;
	// 	left        : 2px;
	// 	padding-left: 5px;
	// }
}